class Component {

    constructor (props) {
        this.props = props
    }

    createElementFromDomString (domString) {
        let div = document.createElement('div')
        div.innerHTML = domString

        return div.children[0]
    }

    setState (partcialState) {
        this.state = Object.assign(this.state, partcialState)
        let oldElement = this.domElement
        let newElement = this.renderElement()
        oldElement.parentElement.replaceChild(newElement, oldElement)
    }

    renderElement () {
        let renderString = this.render()
        this.domElement = this.createElementFromDomString(renderString)
        this.domElement.component = this
        return this.domElement
    }
    
    mount(container) {
        container.appendChild(this.renderElement())
    }
}

window.trigger = function (event, method) {
    event.target.component[method].call(event.target.component)
}


class Counter extends Component {

    constructor (props) {
        super(props)
        this.state = {number: 0}
    }

    render() {
        const { number } = this.state

        return `<button id="counter-app" onclick="trigger(event, 'add')">
            ${number}
            </button>`

    }


    add () {
        this.setState({number: this.state.number + 1})


    }


}